<template>
	<view class="">

		<scroll-view :scroll-into-view="topItem" scroll-with-animation scroll-y="true" class="scroll-cont my-home"
			@scroll="handleScroll">
			<view id="topPosition"></view>
			<view id="auction">
				<view class="">
					<view style="height: 50px;" class="">

					</view>
					<van-nav-bar fixed="ture" @click-left="onClickLeft" class="header">

						<view class="title-left" slot="left">
							<view class="iconfont icon-xitongfanhui">

							</view>

						</view>
						<view class="title-nav" slot="title">
							拍品详情
						</view>
					</van-nav-bar>
				</view>

				<!-- 轮播图 -->
				<view class="shopinfo">
					<view class="uni-margin-wrap">
						<swiper @change="changeswiper" class="swiper" :current="currentswiper" circular
							:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
							:duration="duration">

							<swiper-item v-for="(item,index) in bannerArr " :key="index">
								<!-- <view  uni-bg-red">A</view> -->
								<image class="swiper-item" :src="item.imgUrl" mode=""></image>
							</swiper-item>
						</swiper>
						<view class="current_index">
							{{currentswiper+1}}/{{bannerArr.length}}
						</view>
						<view class="Auction-info">
							<view class="Auction-info-item1">
								<text>当前价￥</text><text>{{auctionobj.nowPrice}}</text>
							</view>
							<view class="Auction-info-item2">
								距离结束
								<view class="count-down">
									<van-count-down use-slot :time="time" @change="onChange" @finish='finishtime'>
										<text class="item">{{ timeData.days }}</text><text class="time-txt">:</text>
										<text class="item">{{ timeData.hours }}</text><text class="time-txt">:</text>
										<text class="item">{{ timeData.minutes }}</text><text class="time-txt">:</text>
										<text class="item">{{ timeData.seconds }}</text>
									</van-count-down>
								</view>

							</view>

						</view>
					</view>

					<!-- 商品信息 -->
					<view style="padding: 1rpx;" class="">


						<view class="auction-info-txt">
							{{auctionobj.commodityName}}
						</view>
					</view>
					<view class="Auction-info-item3">
						<view class="Auction-info-item3-1">
							<view class="iconfont icon-huore">

							</view>
							参与{{auctionobj.recordcount}}
						</view>
						<view @click="reservation()" class="Auction-info-item3-1">
							<view :style="{color:is_appointment?'red':'black'}"
								class="iconfont icon-a-tianjiaguanzhuguanzhu">
							</view>
							关注
						</view>
					</view>
				</view>
				<!-- 竞拍榜 -->
				<view class="Auction-list">
					<view class="Auction-list-item1">
						<text>竞拍榜</text>
						<text>出价{{Biddingrecord.length}}次</text>
					</view>
					<view class="Auction-arrdiv">
						<view v-for="item,index in Biddingrecord" :key="index"
							:class="[index==0?'first_p':'','Auction_list_1']">
							<text>{{index+1}}</text>
							<text>{{username(item.userTel)}}</text>
							<text>领先</text>
							<text>￥{{item.currentMoney}}</text>
						</view>
						<!-- <view class="Auction-list-1">
							<text>3</text>
							<text>j***r</text>
							<text>被超越</text>
							<text>￥820</text>
						</view>
						<view class="Auction-list-1">
							<text>4</text>
							<text>j***r</text>
							<text>被超越</text>
							<text>￥820</text>
						</view> -->

					</view>
				</view>

				<!-- 说明 -->
				<view class="description">
					<view class="description-item1">
						<text>说明</text>
						<text>起拍</text>
						<text>￥{{auctionobj.originalPrice}}</text>
						<text>加价</text>
						<text>￥{{auctionobj.addPrice}}</text>
					</view>
					<view class="description-item2">
						了解更多拍卖规则
					</view>

				</view>
				<!-- 卖家信息 -->
				<view class="seller">
					<view class="sellerimg">
						<image :src="seller.userPhoto" mode=""></image>
						<text>{{seller.userName}}</text>
						<button @click="follow()">{{follower?"取消关注":"关注"}}</button>

					</view>
					<view class="sellerinfo">
						<view class="sellerinfo-item">
							<view class="">{{auctionobj.Praise}}</view>
							<view class="">好评率</view>
						</view>
						<view class="sellerinfo-item">
							<view class="">95%</view>
							<view class="">回复率</view>
						</view>
						<view class="sellerinfo-item">
							<view class="">{{auctionobj.shopnum}}</view>
							<view class="">拍品</view>
						</view>
					</view>
					<view class="seller-footer">
						<button @click="goChat()">联系卖家</button>
						<button>卖家主页</button>
					</view>
				</view>
				<view class="details">
					<view class="details-item1">
						<view class="">

						</view>
						<view class="">
							拍卖详情
						</view>
					</view>
					<view class="detailsimg">
						<image v-for="(item,index) in bannerArr" :src="item.imgUrl" mode="" :key="index"></image>
					</view>

				</view>


				<!-- 底部 -->
				<view class="">
					<view style="height: 100px;" class="">

					</view>
					<view class="Auction-footer">
						<view v-if="depos" class="addprice">
							<view @click="chaneaddprice(auctionobj.addPrice*2)">+{{auctionobj.addPrice*2}}</view>
							<view @click="chaneaddprice(auctionobj.addPrice*3)">+{{auctionobj.addPrice*3}}</view>
							<view @click="chaneaddprice(auctionobj.addPrice*4)">+{{auctionobj.addPrice*4}}</view>
						</view>
						<view @click="offerdepos()" v-if="!depos && auctionobj.bail>0" class="p-state1">
							<text>(保证金￥{{auctionobj.bail}})</text>
							<text>交保证金报名</text>
						</view>
						<view v-if="depos ||auctionobj.bail==0" class="p-state2">
							<view class="p-state2-1">
								<van-stepper plus-class='stepbtn' minus-class="stepbtn" input-class="step1"
									:value="newprice" :min="auctionobj.nowPrice+auctionobj.addPrice"
									:step="auctionobj.addPrice" button-size="32px" @change="offerchange" />
							</view>
							<view @click="offerprice()" class="p-state2-2">
								出价
							</view>
						</view>
					</view>
				</view>
				<!-- 回到顶部 -->
				<view v-if="isShow" @click="handleBackTop" class="topbtn iconfont icon-fanhuidingbu">
					
				</view>
			</view>

		</scroll-view>
		<u-notify ref="uNotify" :top='100' message="Hi uView"></u-notify>
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import request from '../../com/request.js'
	import Timecalculation from "../../com/timecount.js"
	import Toast from '../../wxcomponents/vant/toast/toast';
	export default {
		data() {
			return {
				seller: {},
				userTel: '',
				auctionobj: '',
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				currentswiper: 0,
				bannerArr: [],
				// 倒计时
				time: 30 * 60 * 60 * 1000,
				newprice: 0,
				timeData: {},
				// 返回的按钮是否显示
				isShow: false,
				load:false,  //加载动画
				addprice: 1100,
				// 返回顶部的标记点
				topItem: '',
				follower: false, //是否关注
				is_appointment: false, //是否预约
				depos: false, //是否交过保证金
				Biddingrecord: [] //竞拍记录列表
			}
		},
		methods: {
			goChat() {
				uni.navigateTo({
					url: `/pages/chatpage/chatpage?receiverPhone=${this.seller.userTel}`
				})
			},
			changeswiper(e) {
				this.currentswiper = e.detail.current
			},
			finishtime() {
				console.log(1);
				Toast.fail('拍卖已结束！');
				setTimeout(() => {
					uni.reLaunch({
						url: "/pages/auctionhome/auctionhome"
					})
				}, 1000)


			},
			onChange(e) {
				this.timeData = e.detail
			},
			// 步进器方法
			offerchange(event) {
				// console.log(event.detail);
				this.newprice = event.detail
				console.log(this.newprice);
			},
			handleScroll(e) {
				// 只有scrollTop有用，先拿scrollTop
				let scrollTop = e.detail.scrollTop
				// 滑动大于500让按钮显示
				// console.log(111);
				this.isShow = scrollTop > 500
				// 因为点第二次不行，这里记得重置清空一下
				this.topItem = ''
			},
			handleBackTop() {
				this.topItem = 'topPosition'
				this.isShow=false
			},
			//快捷加价
			chaneaddprice(p) {
				console.log(11);
				this.newprice += p
			},
			onClickLeft() {
				uni.navigateBack({
					delta: 2
				});
			},
			//预约拍卖
			reservation() {
				request({
					url: 'api/updateappointment',
					data: {
						auctionId: this.auctionobj.auctionId,
						userTel: this.userTel
					},
					method: "POST",
					success: (resp) => {
						console.log(resp.data);
						if (resp.data.code == 200) {
							this.is_appointment = true

						} else {
							this.is_appointment = false
						}
					}
				})
			},

			//关注卖家
			follow() {
				request({
					url: 'api/followman',
					method: "POST",
					data: {
						beFocuson: this.seller.userTel,
						follower: this.userTel
					},
					success: (resp) => {
						console.log(resp.data);
						if (resp.data.msg == "已关注") {
							this.follower = true
						} else {
							this.follower = false
						}
					}
				})
			},
			getBidding() { //h获取排行榜
			console.log(334);
				request({
					url: 'api/auctionRecord/getBidding',
					data: {
						auctionId: this.auctionobj.auctionId
					},
					success: (resp) => {
						console.log(resp.data,340);
						this.Biddingrecord = resp.data.data

					}
				})
			},
			// 交押金
			offerdepos() {
				console.log(13234);
				request({
					url: 'api/deposTabel/deposorder',
					data: {
						auctionId: this.auctionobj.auctionId,
						userTel: this.userTel,
						bail: this.auctionobj.bail
					},
					success: (resp) => {
						console.log(resp.data.data);
						console.log(resp.data.orderid,359);
						uni.setStorageSync('orderId',JSON.stringify({
							id:resp.data.orderid,
							type:3
						}))
						console.log(1111);
						uni.navigateTo({
							url:'/pages/close/close'
						})
					}
				})
			},
			// 刷新页面
			reloadpage(){
				request({
					url: 'api/deposTabel/deposinfo',
					data: {
						auctionId: this.auctionobj.auctionId,
						userTel: this.userTel
					},
					success: (resp) => {
						
						if (resp.data.data.length) {
							this.depos = true
						}
					}
				})
				request({
					url: "api/usershopinfo",
					data: {
						userTel: this.auctionobj.userTel
					},
					success: (resp) => {
						console.log(resp.data, 370);
						this.$set(this.auctionobj,'shopnum',resp.data.shopnum)
						this.$set(this.auctionobj,'Praise',resp.data.Praise)
						// this.auctionobj.shopnum = resp.data.shopnum
						// this.auctionobj.Praise = resp.data.Praise
						this.$forceUpdate() 
					}
				})
				
				
				request({
					url: 'api/auction/getshoplist1',
					data: {
						auctionId: this.auctionobj.auctionId
					},
					success: (resp) => {
						console.log(resp.data.data, 308);
						this.auctionobj = resp.data.data[0]
						this.newprice = this.auctionobj.nowPrice + this.auctionobj.addPrice
						request({
							url: 'api/userTabel/userinfo',
							data: {
								userTel: this.auctionobj.userTel //商家号码
				
							},
							success: (resp) => {
								// console.log(resp.data,347);
								this.seller = resp.data.data[0]
								request({
									url: 'api/getfollowman',
									data: {
										beFocuson: this.seller.userTel,
										follower: this.userTel
									},
									success: (resp) => {
										console.log(resp.data);
										if (resp.data.data) {
											this.follower = true
										} else {
											this.follower = false
										}
										request({
											url: 'api/getappointmentman',
											data: {
												auctionId: this.auctionobj
													.auctionId,
												userTel: this.userTel
											},
											success: (resp) => {
												console.log(resp.data, 458);
												if (resp.data.data.length >
													0) {
													this.is_appointment = true
				
												} else {
													this.is_appointment = false
												}
												this.load=false
											}
										})
				
				
				
									}
								})
							}
						})
				
				
					}
				})
				request({
					url: 'api/imgtabel/getimg',
					data: {
						commodityId: this.auctionobj.commodityId
					},
					success: (resp) => {
						// console.log(resp.data);
						this.bannerArr = resp.data.data
					}
				})
				// 获取竞拍记录
				this.getBidding()
				//时间计算
				this.time = Timecalculation(this.auctionobj.endTime).timeDifference
				console.log(this.auctionobj.endTime, );
				
			},
			
			
			// 出价
			offerprice() {
				console.log(this.Biddingrecord[0], 361);
				request({
					url: 'api/auctionRecord/adding',
					method: 'POST',
					data: {
						auctionId: this.auctionobj.auctionId,
						newprice: this.newprice,
						userTel: this.userTel,
						cashPledge: this.auctionobj.bail,
						nowPrice: this.auctionobj.nowPrice,
						addprice: this.auctionobj.addPrice

					},

					success: (res) => {
						console.log(res.data);
						if (res.data.code == 200) {
							Toast.success('出价成功');
							// location.reload()
							this.auctionobj.nowPrice = this.newprice
							this.newprice = this.auctionobj.nowPrice + this.auctionobj.addPrice //步进器的价格

						} else if (res.data.code == 201) {
							Toast.fail('你是第一了');
						} else if (res.data.code == 202) {
							Toast.fail('有人比你快哦');
							this.reloadpage()
						}
						this.getBidding() //重新获取排行榜
					}
				})
				// }


			}

		},
		onPullDownRefresh() {
				console.log('refresh');
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		onLoad(option) {
			this.userTel = uni.getStorageSync('userTel'); //用户号码
			console.log(this.userTel, 392);
			this.auctionobj = JSON.parse(option.auctionobj)
			this.socket.on('auctiontip',msg=>{
				msg=JSON.parse(msg)
				if(msg.userTel!=this.userTel && msg.auctionId==this.auctionobj.auctionId){
					console.log('有人出价了');
					this.$refs.uNotify.show({
					            top: 80,
					            type: 'success',
					            // color: '#000',
					            bgColor: '#a0cfff',
					            message: '有人出价啦',
					            duration: 1000 * 3,
					            fontSize: 20,
					            safeAreaInsetTop:false
					        })
					setTimeout(()=>{
						this.reloadpage()
					},500)
				}
				
				
				// uni.startPullDownRefresh()
		
			})
			request({
				url: 'api/deposTabel/deposinfo',
				data: {
					auctionId: this.auctionobj.auctionId,
					userTel: this.userTel
				},
				success: (resp) => {
					console.log(resp.data,55222222);
					if (resp.data.data.length) {
						console.log('出过押金');
						this.depos = true
					}
				}
			})
			request({
				url: "api/usershopinfo",
				data: {
					userTel: this.auctionobj.userTel
				},
				success: (resp) => {
					console.log(resp.data, 370);
					this.$set(this.auctionobj,'shopnum',resp.data.shopnum)
					this.$set(this.auctionobj,'Praise',resp.data.Praise)
					// this.auctionobj.shopnum = resp.data.shopnum
					// this.auctionobj.Praise = resp.data.Praise
					this.$forceUpdate() 
				}
			})


			request({
				url: 'api/auction/getshoplist1',
				data: {
					auctionId: this.auctionobj.auctionId
				},
				success: (resp) => {
					console.log(resp.data.data, 308);
					this.auctionobj = resp.data.data[0]
					this.newprice = this.auctionobj.nowPrice + this.auctionobj.addPrice
					request({
						url: 'api/userTabel/userinfo',
						data: {
							userTel: this.auctionobj.userTel //商家号码

						},
						success: (resp) => {
							// console.log(resp.data,347);
							this.seller = resp.data.data[0]
							request({
								url: 'api/getfollowman',
								data: {
									beFocuson: this.seller.userTel,
									follower: this.userTel
								},
								success: (resp) => {
									console.log(resp.data);
									if (resp.data.data) {
										this.follower = true
									} else {
										this.follower = false
									}
									request({
										url: 'api/getappointmentman',
										data: {
											auctionId: this.auctionobj
												.auctionId,
											userTel: this.userTel
										},
										success: (resp) => {
											console.log(resp.data, 458);
											if (resp.data.data.length >
												0) {
												this.is_appointment = true

											} else {
												this.is_appointment = false
											}
										}
									})



								}
							})
						}
					})


				}
			})
			request({
				url: 'api/imgtabel/getimg',
				data: {
					commodityId: this.auctionobj.commodityId
				},
				success: (resp) => {
					// console.log(resp.data);
					this.bannerArr = resp.data.data
				}
			})
			// 获取竞拍记录
			this.getBidding()
			//时间计算
			this.time = Timecalculation(this.auctionobj.endTime).timeDifference
			console.log(this.auctionobj.endTime, );
		},

		computed: {
			username() {
				return (item) => {
					let len = item.length
					// console.log(item,len,352);
					let a = item[0] + '***' + item[len - 1]
					return a
				}
			}
		}
	}
</script>

<style scoped>
	#auction {
		background-color: rgb(242, 242, 242);
	}

	#auction>view {
		background-color: white;

	}

	/* 	.header{
		position: fixed;
		top:0px;
		left: 0;
		width: 750rpx;
	} */

	.headernav {
		text-align: center;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid bisque;
	}

	.title-nav {
		font-weight: 700;
		font-size: 15px;
		color: rgb(0, 0, 0, 0.6);
	}

	.title-right {
		display: flex;
	}

	.title-right>view {
		margin-right: 20rpx;
		font-size: 18px;
		font-weight: 600;
	}

	.title-left>view {
		font-size: 20px;
	}

	.uni-margin-wrap {
		width: 750rpx;
		width: 100%;
		position: relative;
	}

	.swiper {
		height: 700rpx;
	}

	.swiper-item {
		display: block;
		width: 100%;
		height: 700rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.current_index {
		position: absolute;
		bottom: 70px;
		right: 10px;
		background-color: rgb(19, 22, 19);
		padding: 7rpx 20rpx;
		font-size: 25rpx;
		font-weight: 700;
		color: white;
		border-radius: 10px;
	}

	.Auction-info {
		position: absolute;
		width: 100%;
		height: 50px;
		border-radius: 15px 15px 0 0;
		background-color: rgb(248, 66, 32);
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.Auction-info-item1 {
		color: white;
		margin-left: 30rpx;
	}

	.Auction-info-item2 {
		color: white;
		margin-right: 30rpx;
		font-size: 13px;
		display: flex;
		align-items: center;
	}

	.item {
		display: inline-block;
		width: 22px;
		margin-right: 5px;
		color: rgb(248, 66, 32);
		font-size: 12px;
		text-align: center;
		background-color: white;
		border-radius: 5px;
		font-weight: 700;
	}

	.count-down {
		margin-left: 10rpx;

	}

	.count-down van-count-down {
		color: white;
	}

	.time-txt {
		color: white;
		margin-right: 6rpx;
	}

	.Auction-info-item1 text:nth-child(1) {
		font-size: 25rpx;
		font-weight: 100;
	}

	.Auction-info-item1 text:nth-child(2) {
		font-size: 40rpx;
	}

	.auction-info-txt {
		width: 91%;
		margin: 10px auto;
		color: black;
		font-weight: 600;
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
	}

	.icon-huore {
		color: rgb(248, 60, 29);
		font-size: 24px;
	}

	.icon-a-tianjiaguanzhuguanzhu {
		font-size: 24px;
	}

	.Auction-info-item3-1 {
		font-size: 16rpx;
		text-align: center;
	}

	.Auction-info-item3 {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.Auction-info-item3>view {
		margin-right: 40rpx;
	}

	.shopinfo {
		border-radius: 0 0 20px 20px;
		background-color: white;
		padding-bottom: 10px;

	}

	.Auction-list {
		background-color: white;
		margin-top: 10px;
		height: 200px;
		padding-top: 10px;
		border-radius: 20px;

	}

	.Auction-list-item1 {
		display: flex;
		width: 90%;
		justify-content: space-between;
		margin: 0 auto;
		font-size: 14px;
		font-weight: 600;
	}

	.Auction_list_1 {
		width: 95%;
		display: flex;
		align-items: center;
		height: 40px;
	}

	.Auction_list_1>text:nth-child(-n+3) {
		flex: 2;
		text-align: center;
		font-size: 13px;
		font-weight: 800;
	}

	.Auction_list_1>text:nth-child(4) {
		flex: 3;
		font-size: 15px;
		text-align: end;
	}

	.Auction_list_1>text:nth-child(n+2) {
		color: rgb(0, 0, 0, 0.3);
	}

	.first_p>text {
		color: black !important;
	}

	.Auction-arrdiv {
		height: 120px;
		overflow-x: hidden;

	}

	.Auction-footer {
		position: fixed;
		bottom: 0px;
		/* max-height: 54px; */
		/* height: 100px; */
		width: 750rpx;
		background-color: rgb(248, 66, 32) !important;

	}

	.addprice {
		display: flex;
		align-items: center;
		background-color: white;
		height: 50px;
	}

	.addprice view {
		background-color: rgb(241, 242, 244);
		/* border: 1px solid unset; */
		border-radius: 10px;
		width: 60px;
		text-align: center;
		height: 25px;
		line-height: 25px;
		font-size: 12px;
		margin-left: 20px;

	}

	.p-state1 {
		display: flex;
		background-color: unset;
		color: white;
		/* display: none; */
		flex-direction: column;
		width: 110px;
		align-items: center;
		margin: 0 auto;
	}

	.p-state1>text:nth-child(1) {
		font-size: 12px;
	}

	.p-state2 {
		height: 50px;
		display: flex;
		align-items: center;
	}

	.p-state2-1 {
		background-color: rgb(44, 44, 44);
		height: 100%;
		width: 70%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.p-state2-2 {
		background-color: rgb(253, 100, 47);
		height: 100%;
		width: 30%;
		color: aliceblue;
		line-height: 50px;
		text-align: center;
		font-weight: 500;

	}

	.description {
		height: 100px;
		border-radius: 20px;
		margin-top: 20px;

	}

	.description-item1 {
		display: flex;
		box-sizing: border-box;
		padding-top: 10px;
		padding-left: 10px;
	}

	.description-item1 text:nth-child(even) {
		color: rgb(253, 100, 47);
		background-color: rgb(253, 232, 229);
		height: 20px;
		font-size: 20rpx;
		line-height: 20px;
		margin-right: 5px;
	}

	.description-item1 text:nth-child(odd) {
		font-size: 35rpx;
		margin-right: 20px;
		font-weight: 500;

	}

	.description-item2 {
		text-align: center;
		margin-top: 20px;
		font-size: 14px;
	}

	.seller {
		border-radius: 20px;
		padding: 1px;
		margin: 10px 0 10px 0;
		/* height: 150px; */


	}

	.sellerimg {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-left: 20px;
		font-weight: 600;
	}

	.seller image {
		width: 60px;
		height: 60px;
		border-radius: 5px;
		margin-right: 10px;

	}

	.sellerimg button {
		background-color: rgb(247, 247, 247);
		border: 0;
		color: black;
		height: 30px;
		line-height: 30px;
		border-radius: 10px;
		font-weight: 100;
	}

	.sellerinfo {
		display: flex;
		margin-top: 20px;

	}

	.sellerinfo>view {
		flex: 1;
		text-align: center;
		position: relative;
	}

	.sellerinfo>view:nth-child(-n+2)::after {
		content: '';
		display: block;
		position: absolute;
		right: 0;
		top: 5px;
		width: 1px;
		height: 40px;
		background-color: rgb(0, 0, 0, 0.2);
	}

	.sellerinfo>view>view:nth-child(1) {
		font-weight: 700;
	}

	.seller-footer {
		display: flex;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.seller-footer button {
		border: 1px solid rgb(0, 0, 0, 0.2);
		width: 120px;
		border-radius: 20px;
		background-color: unset;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		font-weight: 200;


	}

	.details-item1 {
		display: flex;
		box-sizing: border-box;
		padding-left: 20px;
	}

	.details-item1>view:nth-child(1) {
		width: 5px;
		height: 20px;
		margin-right: 5px;
		background-image: linear-gradient(to bottom, rgb(242, 21, 11), rgb(250, 200, 193));
	}

	.details-item1>view:nth-child(2) {
		font-size: 14px;
		font-weight: 600;
	}

	.detailsimg image {
		display: block;
		height: 300px;
		width: 90%;
		margin: 10px auto;
	}

	.topbtn {
		position: fixed;
		bottom: 200px;
		right: 50rpx;
		/* background-color: rebeccapurple; */
		font-size: 25px;
		padding: 10px;
		border-radius: 50%;
		text-align: center;
		border: 1px solid rgb(0, 0, 0, 0.3);
	}

	.scroll-cont {
		height: 100vh;
	}

	/deep/ .step1 {
		width: 240rpx;
		height: 40px !important;
		background-color: rgb(68, 68, 68);
		color: white;
		border-radius: 20px;
		margin: 0 10px 0 10px;
	}

	/deep/ .stepbtn {
		background-color: rgb(68, 68, 68);
		color: white;
		border-radius: 50%;
		font-weight: 700;
	}
</style>
